<template>
  <div class="tab-inner">
    <el-date-picker
      style="width: 100%"
      v-model="value"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="initData"
      size="small"
    >
    </el-date-picker>
    <div class="select-box">
      <span>任务状态</span>
      <el-select v-model="stateSelect" size="mini" @change="taskStateSelect">
        <el-option
          v-for="item in taskCompleteStateAll"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>

    <div class="task-table">
      <el-table highlight-current-row :data="tableData" :show-header="false" @row-click="rowClick">
        <el-table-column prop="taskName"></el-table-column>
        <el-table-column prop="endTime">
          <template slot-scope="{ row }">
            {{ formatData(row.endTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="overtime">
          <template slot-scope="{ row }">
            <span style="color: #13A032" v-if="row.taskCompleteState === 2">已完成</span>
            <span style="color: #F84C0E" v-if="row.taskCompleteState === 1">未完成</span>
            <span style="color: #007AFF" v-if="row.taskCompleteState === 0">待巡检</span>
            <div v-if="row.hasException === true" class="notify">!</div>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        small
        hide-on-single-page
        layout="total, prev, pager, next"
        @current-change="pageHandleChange"
        :current-page="pageInfo.pageNum"
        :page-size="pageInfo.pageSize"
        :total="total"
        :pager-count="pagerCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { getTask } from '../../js/patrol'
import { taskCompleteState } from '../../js/constants'
import moment from 'moment'

export default {
  data () {
    return {
      value: '',
      pageInfo: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      pagerCount: 5,
      tableData: [],
      stateSelect: '',
      taskCompleteState,
      taskCompleteStateAll: [],
      checkType: ''
    }
  },
  props: {
    auto: {
      type: String,
      required: true,
      default: '1'
    }
  },
  mounted () {
    this.initData()
    this.getTaskCompleteState()
  },
  watch: {
    auto () {
      this.pageInfo.pageNum = 1
      this.initData()
    }
  },
  computed: {},
  methods: {
    // 获取任务列表
    async initData () {
      const params = {
        isAuto: +this.auto,
        taskCompleteState: this.stateSelect,
        endTimeFrom: this.value ? moment(this.value[0]).format('YYYY-MM-DD HH:mm:ss') : '',
        endTimeTo: this.value
          ? moment(this.value[1])
            .endOf('day')
            .format('YYYY-MM-DD HH:mm:ss')
          : ''
      }
      const {
        code,
        data: { list, total },
        msg
      } = await getTask(Object.assign({}, this.pageInfo, params))
      if (code === 0) {
        this.tableData = list
        this.total = total
        // if (this.stateSelect !== 3) {
        //   this.tableData = this.tableData.filter(item => {
        //     return item.taskCompleteState === this.stateSelect
        //   })
        // }
      } else {
        this.$message.warning(msg)
      }
    },

    // 行点击
    rowClick (row) {
      this.$emit('checked', row)
    },

    // 页码改变
    pageHandleChange (page) {
      this.pageInfo.pageNum = page
      this.initData()
    },

    // 格式化日期
    formatData (str) {
      return moment(str).format('yyyy.MM.DD')
    },

    getTaskCompleteState () {
      let obj = {
        value: '',
        label: '全部'
      }
      this.taskCompleteStateAll = [].concat(obj, this.taskCompleteState)
    },
    // 任务状态筛选
    taskStateSelect () {
      this.pageInfo.pageNum = 1
      this.initData()
    }
  }
}
</script>

<style scoped lang="scss">
.tab-inner {
  .select-box {
    width: 100%;
    height: 32px;
    background: #ffffff;
    margin: 0.1rem 0;
    line-height: 0.4rem;
    span {
      font-size: 14px;
      margin-left: 0.1rem;
      color: #9191af;
      line-height: 0.4rem;
    }
    .el-select {
      width: 60%;
      float: right;
      margin-right: 0.05rem;
    }
  }
  .task-table {
    background: #ffffff;
    padding-bottom: 10px;
  }
  .el-table /deep/ {
    padding-top: 0;
    cursor: pointer;
    margin-top: 0.05rem;
    color: #9191af;
    .el-table__body {
      table-layout: inherit;
      width: 100% !important;
    }
    .el-table__empty-block {
      width: 100% !important;
    }
    .cell {
      padding: 0;
    }
    .notify {
      // float: right;
      width: 0.15rem;
      height: 0.15rem;
      position: absolute;
      top: 33%;
      right: 5%;
      // margin-left: 0.05rem;
      border-radius: 50%;
      background: #f84c0e;
      line-height: 0.15rem;
      font-size: 0.1rem;
      color: #fff;
    }
  }
  /deep/ .el-pagination {
    margin-top: 10px;
  }
}
</style>
